<script setup lang="ts">
import { onMounted, ref } from 'vue';
// 酒店基本信息接口api
import { getHotelBaseInfoApi } from '#/api';

import BaseInfo from './components/BaseInfo.vue';
import DetailInfo from './components/DetailInfo.vue';

interface FormData {
  hotelNameZh: null | string;
  addressName: null | string;
  addressZh: null | string;
  longitude: null | number | string;
  latitude: null | number | string;
  phone: number | string;
  roomCount: null | number;
  descriptionZh: null | string;
  coverImage: null | string;
}

const form = ref<FormData>({
  hotelNameZh: '', // 酒店中文名称
  addressName: '', // 酒店中文名称
  addressZh: '', // 中文详细地址
  longitude: null, // 经度
  latitude: null, // 纬度
  phone: '', // 酒店总机
  roomCount: null, //	客房总数
  descriptionZh: '', // 中文简介
  coverImage: '', // 酒店首图
});

// 默认值 因为编辑接口都为一个 所以需要记录一下表单的初始化默认值，防止改动未点击保存的内容
const defaultForm = ref<FormData>();

interface EditKeys {
  [key: string]: boolean; // 定义索引签名，允许任意字符串作为属性名
  editName: boolean;
  editAddress: boolean;
  editPhone: boolean;
  editCount: boolean;
  editIntro: boolean;
  editCoverImage: boolean;
}
// 编辑状态，放父组件统一管理，限制一次只能编辑一个
const editStatus = ref<EditKeys>({
  editName: false, // 是否正在编辑名称
  editAddress: false, // 是否正在编辑地址信息
  editPhone: false, // 是否正在编辑前台电话
  editCount: false, // 是否正在编辑房间总数
  editIntro: false, // 是否正在编辑酒店简介
  editCoverImage: false, // 是否正在编辑酒店封面图
});

// 获取基本信息详情
const getInfo = async () => {
  try {
    const { data } = await getHotelBaseInfoApi();
    form.value = data;
    defaultForm.value = { ...data };
  } catch (error) {
    console.error('获取基本信息详情错误：', error);
  }
};

onMounted(() => {
  getInfo();
});
</script>

<template>
  <div
    class="absolute bottom-0 right-0 flex h-[100%] w-[100%] flex-col overflow-hidden"
  >
    <div class="main overflow-auto p-4">
      <div class="mb-4 text-2xl font-bold">酒店基本信息</div>
      <!-- 基本信息 -->
      <BaseInfo
        v-model:edit-status="editStatus"
        v-model:form="form"
        :default-form="defaultForm"
        @init="getInfo"
      />

      <!-- 详细信息 -->
      <DetailInfo
        v-model:edit-status="editStatus"
        v-model:form="form"
        :default-form="defaultForm"
        @init="getInfo"
      />
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
